<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>新增房间</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/jquery.easyui.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/easyui-lang-zh_CN.js" />"></script>
		<script type="text/javascript">
			function onSelTYPE(){
				$('#selectRoomType').window('open');
			}
			
			function onSelAREA(){
				$('#selectRoomArea').window('open');
			}
			
			function clearForm(){
				$("#room_no").val('');
				$("#room_type_name").val('');
				$("#room_type_id").val('');
				$("#room_area_name").val('');
				$("#room_area_id").val('');
				$("#capacity").val('');
				$("#tel_no").val('');
				$("input[name='room_status'][value=${roomStatusFree}]").attr("checked",true);
			}
			
			$(function(){
				if('${result}' != null && '${result}' != ''){
					$.messager.alert('操作结果','${result}');
				}
			});
			
			function submitForm(){
				var flag = "false";
				$.ajax({
					url:'checkRoomNo.do',
					data:{'roomNo':$.trim($("#room_no").val())},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(data){
						flag = data.toString();
					}
				});
				
				if(flag == 'true'){
					$.messager.alert('操作结果','房间编号已存在','warning');
					return false;
				}
				
				$("#addRoomForm").submit();
			}
			
			function onQueryArea(){				
				$('#roomAreaTable').datagrid({
					url: '../roomArea/queryRoomArea.do',
					pageNumber:1,				
					queryParams:{roomAreaName:$("#roomAreaName").val()}
				});
			}
			
			function onResetArea(){
				$("#roomAreaName").val('');
			}
			
			function onQueryType(){				
				$('#roomTypeTable').datagrid({
					url: '../roomType/queryRoomType.do',
					pageNumber:1,				
					queryParams:{roomTypeName:$("#roomTypeName").val(),						
						productNo:$.trim($('#productNo').val()),
						productName:$.trim($('#productName').val())}
				});
			}
			
			function onResetType(){
				$("#roomTypeName").val('');
				$("#productNo").val('');
				$("#productName").val('');
			}
		</script>
	</head>
	
	<body>
		<div class="easyui-panel" title="新增房间" fit="true">
			<div style="padding:10px 0 10px 60px; text-align: right;">
				<form name="addRoomForm" id="addRoomForm" method="post" action="addRoom">
					<table  style="text-align: center; border:1px;width:400px;">
						<tr>
							<td align="right" style="height:28px;">房间编号：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" 
	    							name="room_no" id="room_no" required="true" />
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">房间类型 ：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" name="room_type_name" id="room_type_name" data-options="required:true" />
	    						<input type="hidden" name="room_type_id" id="room_type_id" />
	    						&nbsp;&nbsp;
	    						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="onSelTYPE()">选择</a>
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">房间区域 ：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" name="room_area_name" id="room_area_name" data-options="required:true" />
	    						<input type="hidden" name="room_area_id" id="room_area_id" />
	    						&nbsp;&nbsp;
	    						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="onSelAREA()">选择</a>
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">房间容量：</td>
	    					<td align="left">
	    						<input class="easyui-numberbox" style="width:150px;" type="text" 
	    							name="capacity" id="capacity" data-options="required:true" />
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">房间电话：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" 
	    							name="tel_no" id="tel_no" />
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">状态：</td>
	    					<td align="left">
	    						<input type="radio" name="room_status" id="status" value="${roomStatusFree}" checked="checked"/>空闲
	    						&nbsp;&nbsp;&nbsp;&nbsp;
	    						<input type="radio" name="room_status" id="status" value="${roomStatusUsed}" />占用
	    					</td>
						</tr>
					</table>
				</form>
			</div>
			
			<div style="margin-left:170px;padding:5px">
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">保存</a>
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	    	</div>
		</div>
		
		<div id="selectRoomType" class="easyui-window" title="房间类型选择" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:700px;height:400px;">
			<table id="roomTypeTable" class="easyui-datagrid" title="房间类型列表" style="width:700px;height:250px;"
	 			data-options="rownumbers:true,singleSelect:true,border:false,singleSelect:true,toolbar:'#tb',
	 					fit:true,fitColumns:true,pagination:true,url:'../roomType/queryRoomType.do',onClickRow:function(rowIndex, rowData){
		 						$('#room_type_name').val(rowData.room_type_name);
		 						$('#room_type_id').val(rowData.id);
		 						$('#selectRoomType').window('close');
		 				}">
				<thead>
					<tr>
						<th data-options="field:'room_type_name',width:80,align:'center'">房间类型名称</th>
						<th data-options="field:'productName',width:120,align:'center'">绑定商品名称</th>
						<th data-options="field:'productNo',width:120,align:'center'">绑定商品编码</th>
					</tr>
				</thead>
			</table>
			<div id="tb" style="padding:5px;height:auto">
				<form id="queryRoomTypeForm" name="queryRoomTypeForm" action="queryRoomType" method="post">
				<div>
					房间类型名称: <input class="easyui-validatebox" name="roomTypeName" id="roomTypeName" style="width:80px">
					&nbsp;&nbsp;&nbsp;&nbsp;
					商品编号: <input class="easyui-validatebox" name="productNo" id="productNo" style="width:80px">
					&nbsp;&nbsp;&nbsp;&nbsp;                          
					商品名称: <input class="easyui-validatebox" name="productName" id="productName" style="width:80px">
					&nbsp;&nbsp;
					<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQueryType()">查询</a>
					<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onResetType()">清空</a>
				</div>
				</form>
				
			</div>
		</div>
		
		<div id="selectRoomArea" class="easyui-window" title="房间区域选择" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:700px;height:400px;">
			<table id="roomAreaTable" class="easyui-datagrid" title="房间区域列表" style="width:700px;height:250px;"
	 			data-options="rownumbers:true,singleSelect:true, border:false,singleSelect:true,toolbar:'#tbArea',
	 					fit:true,fitColumns:true,pagination:true,url:'../roomArea/queryRoomArea.do',onClickRow:function(rowIndex, rowData){
		 						$('#room_area_name').val(rowData.area_name);
		 						$('#room_area_id').val(rowData.id);
		 						$('#selectRoomArea').window('close');
		 				}">
				<thead>
					<tr>
						<th data-options="field:'area_name',width:80,align:'center'">房间区域名称</th>
					</tr>
				</thead>
			</table>
			<div id="tbArea" style="padding:5px;height:auto">
				<form id="queryRoomAreaForm" name="queryRoomAreaForm" action="queryRoomArea" method="post">
				<div>
					房间区域名称: <input class="easyui-validatebox" name="roomAreaName" id="roomAreaName" style="width:80px">
					&nbsp;&nbsp;
					<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQueryArea()">查询</a>
					<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onResetArea()">清空</a>
				</div>
				</form>
				
			</div>
		</div>
	</body>
</html>